<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="书名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="author"
          label="作者"
          width="120">
      </el-table-column>
      <el-table-column
          prop="publish"
          label="出版社"
          width="120">
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="5"
        :total="total"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>

export default {
  methods: {
    handleEdit(row) {
      /*row数据是全部对应的行数上的信息，以对象的形式传递*/
      console.log(row);
      this.$router.push({
        path: '/bookUpdate',
        query: {
          id: row.id
        }
      });
    },
    handleDelete(row) {
      const _this = this;
      axios.post('http://localhost:8081/book/delete', row).then(function (resp) {
        if (resp.data.result === 'success') {
          _this.$alert('《' + row.name + '》' + '删除成功！', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              /*确定之后的反馈动作*/
              _this.$router.push('/bookSelect');
            },
          });
        }
      });
    },
    page(currentPage) {
      const _this = this;
      axios.get('http://localhost:8081/book/' + currentPage + '/5').then(function (resp) {
        _this.tableData = resp.data.content;
        _this.total = resp.data.page.rows;
      });
    }
  },
  created() {
    const _this = this;
    axios.get('http://localhost:8081/book/1/5').then(function (resp) {
      _this.tableData = resp.data.content;
      _this.total = resp.data.page.rows;
    });
  },
  data() {
    return {
      total: null,
      tableData: [{
        id: '1',
        name: '解忧杂货店',
        author: '东野圭吾',
        publish: '电子工业出版社'
      }]
    }
  }
}
</script>
